<template>
  <div class="app">
    <h2>{{ msg }}</h2>
    <input type="text" v-model="msg" />
  </div>
</template>

<script setup lang="ts">
import useMessageRef from './hooks/useMessageRef'

// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('你好')

// 使用Vue提供的customRef定义响应式数据
// let initValue = '你好'
// // track(跟踪)、trigger(触发)
// let timer: number
// let msg = customRef((track, trigger) => {
//   return {
//     // get何时调用？ -- msg被读取时
//     get() {
//       track() //告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
//       return initValue
//     },
//     // set何时调用？ -- msg被修改时
//     set(value) {
//       clearTimeout(timer)
//       timer = setTimeout(() => {
//         initValue = value
//         trigger() //通知Vue一下数据msg变化了
//       }, 1000)
//     },
//   }
// })
let { msg } = useMessageRef('你好', 2000)
</script>

<style scoped></style>
